<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教员添加</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>></cite></a> <a><cite>教员管理</cite></a> 
		<a><cite>></cite></a> <a><cite>教员信息</cite></a> <a><cite>></cite></a> <a><cite>教员信息添加</cite></a></span> 
		<a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<div class="layui-upload">
			<div class="layui-tab layui-tab-brief">
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<form class="layui-form layui-form-pane">
							<div class="layui-form-item">
								<label for="link" class="layui-form-label"> <span
									class="x-red">*</span>教员名
								</label>
								<div class="layui-input-block">
									<input type="text" id="teachername" name="teachername" 
										lay-verify="required" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label for="desc" class="layui-form-label"> <span
									class="x-red">*</span>教员性别
								</label>
								<div class="layui-input-block">
									<select name="teachersex" id="teachersex"></select>
								</div>
							</div>
							<div class="layui-form-item">
								<label for="desc" class="layui-form-label"> <span
									class="x-red">*</span>教员学历
								</label>
								<div class="layui-input-block">
									<select class="layui-select" name="teacherxl" id="teacherxl"></select>
								</div>
							</div>
							<div class="layui-form-item">
								<label for="link" class="layui-form-label"> <span
									class="x-red">*</span>教员电话
								</label>
								<div class="layui-input-block">
									<input type="number" id="teachertel" name="teachertel" id="teachertel"
										lay-verify="required" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item layui-form-text">
								<label class="layui-form-label"> <span class='x-red'>*</span>教员简介
								</label>
								<div class="layui-input-block">
									<textarea placeholder="" class="layui-textarea"
										name="teacherdesc" id="teacherdesc" lay-verify="required"></textarea>
								</div>
							</div>
							<div class="layui-form-item">
								<label for="link" class="layui-form-label">教员照片</label>
								<button type="button" class="layui-btn" id="test1" name="uploadfile">
									<i class="layui-icon">&#xe67c;</i>上传图片
								</button>
								<p>&nbsp;</p>
								<div class="layui-upload-list">
									<label for="link" class="layui-form-label">预览图</label>
									<img class="layui-upload-img" id="demo1" width="100px" height="100px">
									<p id="demoText"></p>
								</div>
							</div>
							<button type="button" class="layui-btn" id="submit">添加</button>
						</form>
						<div style="height: 100px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="./layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script src="js/jquery-2.0.3.js"></script>
	<script>
	
	layui.use(['upload','form','element'], function(){
		  var $ = layui.jquery
		  ,upload = layui.upload

		  //普通图片上传
		  var uploadInst = upload.render({
		    elem: '#test1'
		    ,url: 'UploadServlet' //改成您自己的上传接口
		    ,accept: 'images'
		    ,field: 'upload'
		    ,auto: false
		    ,bindAction: '#submit'
		    ,before: function(){
		      this.data = {
		    	 teacherName :  $('input[name = "teachername"]').val(),
		    	 teacherSex : $('select[name = "teachersex"]').val(),
		    	 teacherXl :  $('select[name = "teacherxl"]').val(),
		    	 teacherTel : $('input[name = "teachertel"]').val(),
		    	 teacherDesc : $('textarea[name = "teacherdesc"]').val(),
		    	 op : 'add',
		    	 servlet : 'TeachServlet'
		      }
		    }
		    ,choose: function(obj){
		   		obj.preview(function(index, file, result){
		 		  $('#demo1').attr('src', result); //图片链接（base64）
		 		});
		    }
		    ,done: function(res){
		      // res 服务端响应信息
		     	console.log(res.code);
		      if(res.code == 200){
		    	  layer.msg("添加成功!",{icon:6,time:1000});
	                setTimeout(function(){
	                    window.parent.location.reload();
	                    var index = parent.layer.getFrameIndex(window.name);
	                    parent.layer.close(index);
	                },1000);
	                return false;
				} else {
					layer.msg("添加失败!",{icon:5,time:2000});
					return false;
				}
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
		  });
	});
	
	var xl = ["本科","研究生","硕士","博士","其它"];
	var sex = ["男","女"];
	$(function(){
		$.each(xl,function(i,o){
			$("#teacherxl").append("<option value = "+o+">"+o+"</option>");
		})
		
		$.each(sex,function(i,o){
			$("#teachersex").append("<option value = "+o+">"+o+"</option>");
		})
		
		$("#teachertel").blur(function(){
			regCheckTel();
		});
	})
	function regCheckTel(){
		var phoneNum = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
		var Tel = $('input[name = "teachertel"]').val();
		if(!phoneNum.test(Tel)){
			layer.msg("手机号格式错误!",{icon:5,time:2000});
		}
	}

		
	</script>
</body>
</html>